<!-- 基本信息 -->
<template>
	<view class="card d-flex">
		<view class="card_head relative d-flex mb-30">
			<text class="card_head_title relative">基本信息</text>
		</view>
		
		<view class="card_content d-flex">
			<view class="info d-flex pt-30 pb-30 mb-30">
				<view class="info_item d-flex">
					<text class="info_item_label info_item_txt t-center mb-30">姓名</text>
					<text class="info_item_val info_item_txt t-center">{{ info?.name || '' }}</text>
				</view>
				<view class="info_item d-flex">
					<text class="info_item_label info_item_txt t-center mb-30">性别</text>
					<text class="info_item_val info_item_txt t-center">{{ info?.gender || '' }}</text>
				</view>
				<view class="info_item d-flex">
					<text class="info_item_label info_item_txt t-center mb-30">年龄</text>
					<text class="info_item_val info_item_txt t-center">{{ info?.age || '' }}</text>
				</view>
				<view class="info_item d-flex">
					<text class="info_item_label info_item_txt t-center mb-30">星座</text>
					<text class="info_item_val info_item_txt t-center">{{ info?.constellation || '' }}</text>
				</view>
			</view>
			
			<view class="msg d-flex">
				<view class="msg_item d-flex mb-20">
					<text class="msg_item_txt msg_item_label">身份证号</text>
					<text class="msg_item_txt msg_item_val">{{ info?.card || ''  }}</text>
				</view>
				
				<view class="msg_item d-flex mb-20">
					<text class="msg_item_txt msg_item_label">身份证首次发证地</text>
					<text class="msg_item_txt msg_item_val">{{ info?.issuancePlace || '' }}</text>
				</view>
				
				<view class="msg_item d-flex mb-20">
					<text class="msg_item_txt msg_item_label">手机号</text>
					<text class="msg_item_txt msg_item_val">{{ info?.phone || '' }}</text>
				</view>
				
				<view class="msg_item d-flex mb-20">
					<text class="msg_item_txt msg_item_label">身份证核验结果</text>
					<text class="msg_item_txt msg_item_val">{{ onCardType(info?.result || 0) }}</text>
				</view>
			</view>
			
			<uv-divider></uv-divider>
			
			<view class="tips d-flex">
				<Icon class="mr-10" name="info-circle" size="28rpx" color="#FF0000" />
				
				<text class="tips_txt">
					提示：<br />
					如查询的姓名/身份证与运营商提供的不一致，可能会存在报告内容不匹配的情况。
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, defineProps, computed } from 'vue'
	import Icon from '@/components/Icon/index.vue'

	
	const props = defineProps({
		info: {
			type: Object,
			default: () => {}
		}
	})
	
	const onCardType = type => {
		if (+type === 1) {
			return '通过'
		} else if (+type === 2) {
			return '未通过'
		} else if (+type === 0) {
			return '未申请'
		} else {
			return '未知'
		}
	}
</script>

<style lang="scss" scoped>
.card {
	flex-direction: column;
	
	&_content {
		flex-direction: column;
	}
	
	.info {
		width: 100%;
		background: linear-gradient(to right, #F4F7FF, #FFF5F8);
		border-radius: 16rpx;
		&_item {
			flex: 1;
			flex-direction: column;
			
			&_txt {
				color: #404040;
				font: {
					size: 26rpx
				}
			}
		}
	}
	
	.msg {
		flex-direction: column;
		
		&_item {
			justify-content: space-between;
			
			&_txt {
				font: {
					size: 26rpx
				}
			}
			
			&_label {
				color: #6C7282
			}
			&_val {
				color: #404040;
			}
		}
	}

	.tips {
		align-items: baseline;
		
		&_txt {
			color: #6C7282;
			font: {
				size: 26rpx
			}
		}
	}
}
</style>
